<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('操作列表')"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="operlog-form">
                <div class="select-list">
                    <ul>
                        <li>
                            时间类型：<select name="type">
                            <option value="">全部</option>
                            <option value="out">出口日期</option>
                            <option value="in">进口日期</option>
                        </select>
                        </li>
                        <li class="select-time">
                            <label>时间： </label>
                            <input type="text" class="time-input" id="startDate" placeholder="开始时间" name="startDate"
                                   autocomplete="off" value="new Date()"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endDate" placeholder="结束时间" name="endDate"
                                   autocomplete="off"/>
                        </li>
                        <li>
                            提单号：<input type="text" name="tdNo"/>
                        </li>
                        <li>
                            箱号/罐号：<input type="text" name="boxNo"/>
                        </li>
                        <li>
                            报关单号：<input type="text" name="bgdNo"/>
                        </li>
                        <li>
                            船名：<input type="text" name="shipName"/>
                        </li>
                        <li>
                            航次：<input type="text" name="ovoy"/>
                        </li>
                        <li  style="display: none">
                            业务类型：<input type="text" name="businessType" value="出口" />
                        </li>
                        <li  style="display: none">
                            商品类型：<input type="text" name="productType" value="普货" />
                        </li>
                        <!--                        <li>-->
                        <!--                            起始地：<select  name="porCityId" id="porCityId" th:with="cityList=${@dict.getCityCN()}"  data-live-search="true" liveSearchStyle="contains"  class="selectpicker" title="所有">-->
                        <!--                            <option th:each="city : ${cityList}" th:text="${city.CITY_FULL_NAME_CN}" th:value="${city.UUID}" ></option>-->
                        <!--                        </select>-->
                        <!--                        </li>-->
                        <!--                        <li>-->
                        <!--                            目的地：<select name="fndCityId" th:with="cityList=${@dict.getCity()}" data-live-search="true" liveSearchStyle="contains"  class="selectpicker" title="所有">-->
                        <!--                            <option th:each="city : ${cityList}" th:text="${city.CITY_FULL_NAME_EN}" th:value="${city.UUID}"></option>-->
                        <!--                        </select>-->
                        <!--                        </li>-->
                        <li>
                            尺寸：<select name="cc">
                            <option value="">全部</option>
                            <option value="20">20</option>
                            <option value="40">40</option>
                        </select>
                        </li>
                        <li>
                            箱型：<select name="xx">
                            <option value="">全部</option>
                            <option value="GP">GP</option>
                            <option value="HC">HC</option>
                            <option value="TK">TK</option>
                        </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
<!--            <a class="btn btn-success" onclick="add()">-->
<!--                <i class="fa fa-plus"></i> 新增-->
<!--            </a>-->
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-danger multiple disabled" onclick="cancleAll()">
                <i class="fa fa-remove"></i> 核销
            </a>
        </div>

        <div class="col-sm-12 select-table table‐bordered table‐responsive">
            <table id="bootstrap-table" class="table text‐nowrap"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: bootstrap-table-fixed-columns-js" />
<script th:inline="javascript">
    var prefix = ctx + "business/order2";
    var datas1 = [[${@dict.getCusNo()}]];
    var datas2 = [[${@dict.getCusNoS()}]];
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startDate',
            type: 'date',
            trigger: 'click',
            value: new Date()
        });
    })

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add/job",
            removeUrl: prefix + "/remove",
            modalName: "商品",
            uniqueId: "id",
            queryParams: queryParams,
            fixedColumns: true,
            fixedNumber: 1,
            fixedRightNumber: 2,
            rowStyle:function (row, index) {
                var classes = [
                    'bg-1',
                    'bg-2',
                    'bg-3',
                    'bg-4'
                ]
                var hang = row.coalorFlag;
                if(hang === "1"){
                    return {
                        classes: classes[0]
                    }
                }else if (hang === "2"){
                    return {
                        classes: classes[1]
                    }
                }else if (hang === "3"){
                    return {
                        classes: classes[2]
                    }
                }
                if (row.status === "2"){//核销
                    return {
                        classes: classes[3]
                    }
                }
                return {};
            },
            columns: [{
                checkbox: true
            }, {
                title: "序号",
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            }, {
                field: 'id',
                title: 'ID',
                visible: false
            },
                {
                    field: 'cusNo',
                    title: '箱属',
                    align: "center",
                    formatter: function(value, row, index) {
                        var actions = [];
                        $.each(datas1, function(index, item) {
                            if(item.id == value){
                                actions.push(item.name);
                                return false;
                            }
                        });
                        return actions.join('');
                    }
                },
                {
                    field: 'cusNoS',
                    title: '船代公司',
                    align: "center",
                    formatter: function(value, row, index) {
                        var actions = [];
                        $.each(datas2, function(index, item) {
                            if(item.id == value){
                                actions.push(item.name);
                                return false;
                            }
                        });
                        return actions.join('');
                    }
                },
                {
                    field: 'cc',
                    title: '箱尺寸',
                    align: "center"
                },
                {
                    field: 'country',
                    title: '运抵国',
                    align: "center"
                },
                {
                    field: 'port',
                    title: '指运港',
                    align: "center"
                },
                {
                    field: 'num',
                    title: '箱数',
                    align: "center"
                },
                {
                    field: 'boxWeight',
                    title: '箱皮重',
                    align: "center"
                },
                {
                    field: 'sendCustomerName',
                    title: '境内发货人',
                    align: "center"
                },
                {
                    field: 'receiveCustomerName',
                    title: '境外收货人',
                    align: "center"
                },
                {
                    field: 'bgdNo',
                    title: '报关单号',
                    align: "center"
                },
                {
                    field: 'shipName',
                    title: '船名',
                    align: "center"
                },
                {
                    field: 'ovoy',
                    title: '航次',
                    align: "center"
                },
                {
                    field: 'tdNo',
                    title: '提单号',
                    align: "center"
                },
                {
                    field: 'boxNo',
                    title: '箱号',
                    align: "center"
                },
                {
                    field: 'productName',
                    title: '品名',
                    align: "center"
                },
                {
                    field: 'productCode',
                    title: '编码',
                    align: "center"
                },
                {
                    field: 'weight',
                    title: '重量',
                    align: "center"
                },
                {
                    field: 'outDate',
                    title: '出口日期',
                    align: "center",
                    formatter: function (value, row, index) {
                        return '<div style="width:90px">'+value+'</div>';
                    }
                },
                {
                    field: 'inDate',
                    title: '进口日期',
                    align: "center",
                    formatter: function (value, row, index) {
                        return '<div style="width:90px">'+value+'</div>';
                    }
                },
                {
                    field: 'zs',
                    title: '集装箱证书',
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.imageView(value,600,1200,'blank');

                    }
                },
                {
                    field: 'bgdImg',
                    title: '报关单图片',
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.imageView(value,600,1200,'blank');

                    }
                },
                {
                    field: 'remark',
                    title: '备注',
                    align: "center"
                }, {
                    field: 'createBy',
                    title: '创建人',
                    align: "center"
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    align: "center",
                    formatter: function (value, row, index) {
                        return '<div style="width:90px">'+value+'</div>';
                    }
                },
                {
                    field: 'status',
                    title: '状态',
                    align: "center",
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<div style="width:60px;color: #000000;font-weight:bold">正常</div>';
                        } else if (value == 2) {
                            return '<div style="width:60px;color: #000000;font-weight:bold">核销</div>';
                        } else {
                            return '<div style="width:60px;color: #000000;font-weight:bold">异常</div>';
                        }
                    }
                },
                {
                    field: 'sort',
                    title: '排序',
                    align: "center"
                },
                {
                    title: '操作',
                    align: 'left',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>完善信息</a> ');
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="copy(\'' + row.id + '\')"><i class="fa fa-edit"></i>复制信息</a> ');
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="cancle(\'' + row.id + '\')"><i class="fa fa-edit"></i>核销按钮</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function queryParams(params) {
        var search = $.table.queryParams(params);
        return search;
    }

    function searchPre() {
        $.table.search('operlog-form', 'bootstrap-table');
    }

    function resetPre() {
        $("#operlog-form")[0].reset();
        $("#businessTypes").selectpicker('refresh');
        $.table.search('operlog-form', 'bootstrap-table');
    }

    function add() {
        // $.operate.add();
        $.modal.open("新增", prefix + "/add/job", '1200', '600');
    }

    function edit(id) {
        // $.operate.add();
        $.modal.open("编辑", prefix + "/edit/"+id, '1200', '600');
    }
    function copy(id) {
        table.set();
        $.modal.confirm("确定复制该条" + table.options.modalName + "信息吗？", function () {
            var data = {"ids": id};
            $.operate.submit(prefix + "/copy", "post", "json", data);
        });
    }


    function cancle(id) {
        table.set();
        $.modal.confirm("确定核销该条" + table.options.modalName + "信息吗？", function () {
            var url = $.common.isEmpty(id) ? table.options.removeUrl : table.options.removeUrl.replace("{id}", id);
            if (table.options.type == table_type.bootstrapTreeTable) {
                $.operate.get(prefix + "/cancle");
            } else {
                var data = {"ids": id};
                $.operate.submit(prefix + "/cancle", "post", "json", data);
            }
        });
    }

    function cancleAll() {
        table.set();
        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要核销选中的" + rows.length + "条数据吗?", function () {
            var url = table.options.removeUrl;
            var data = {"ids": rows.join()};
            $.operate.submit(prefix + "/cancle", "post", "json", data);
        });
    }

</script>
<style>
    .bg-1 {
        background-color: #ec5747 !important;font-weight:bold;
    }
    .bg-2 {
        background-color: #f80101 !important;font-weight:bold;
    }
    .bg-3 {
        background-color: #c30101 !important;font-weight:bold;
    }
    .bg-4 {
        background-color: deepskyblue !important;font-weight:bold;
    }
</style>
</body>
</html>

